<template>
  <view class="perfect-info__dialog">
    <UniPopup
      ref="perfectInfoDialog"
      borderRadius="32rpx 32rpx 0 0"
      backgroundColor="#fff"
      @maskClick="handleMaskClick"
    >
      <view class="dialog-container">
        <view class="dialog-header">
          <text>补充信息认识相关朋友~</text>
        </view>
        <BasicsForm @register="handleRegister" @submit="formSubmit" />
      </view>
    </UniPopup>
  </view>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm } from '@/components/Form';
  import { IsInternalInterfaceEnum } from '@/enums/formEnum';
  import { getCurrentInstance, watch } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { perfectUserInfo } from '@/api/mine';
  import { useUserStore } from '@/store/modules/user';
  import { isArray } from 'lodash-es';
  import { isJSON } from '@/utils/is';

  const { setUserInfo, userInfo } = useUserStore();
  const _this = getCurrentInstance();

  const props = defineProps({
    visible: propTypes.bool.def(false),
  });

  const emits = defineEmits<{
    (e: 'update:visible', type: boolean): void;
  }>();

  watch(
    () => props.visible,
    (val) => {
      val ? openPopup() : closePopup();
    },
  );

  const openPopup = () => {
    (_this?.refs['perfectInfoDialog'] as any).open('bottom');
  };

  const closePopup = () => {
    (_this?.refs['perfectInfoDialog'] as any).close('bottom');
    handleMaskClick();
  };

  const [register, { setFieldsValue }] = useForm({
    labelPosition: 'top',
    labelAlign: 'left',
    validateTrigger: 'bind',
    labelWidth: 100,
    isScrollToError: false,
    btnGroupOptions: {
      position: 'static',
      submit: {
        text: '提交',
        type: 'primary',
        customClass: 'br-50',
      },
    },
    schemas: [
      {
        field: 'nativePlace',
        label: '家乡籍贯（找到与你的同乡）',
        component: 'AreaPicker',
        required: false,
        componentProps: {
          placeholder: '请选择',
        },
      },
      {
        field: 'schoolName',
        label: '毕业学校（找到与你教育经历相似的校友）',
        component: 'InputSearch',
        isInternalInterface: IsInternalInterfaceEnum.SCHOOL,
      },
      {
        field: 'resource',
        label: '可提供资源（可以带来更多合作机会）',
        component: 'InputTextArea',
        componentProps: {
          placeholder: '可以介绍自己能提供的资源、产品或服务等等~',
        },
      },
      {
        field: 'demand',
        label: '需求资源（获得相关资源推荐）',
        component: 'InputTextArea',
        componentProps: {
          placeholder: '可以说说自己的需求~',
        },
      },
    ],
  });

  function handleRegister(e: any) {
    register(e)


    setFieldsValue({
      schoolName: userInfo.schoolName,
      nativePlace: userInfo.nativePlace,
      resource: userInfo.resource,
      demand: userInfo.demand,
    })
  }

  async function formSubmit(e: Recordable) {
    if (isArray(e['schoolName']) && e['schoolName'][0]) {
      const item = isJSON(e['schoolName'][0]);
      delete e['schoolName'];
      item && (e['schoolCode'] = item.id);
    }
    const { schoolCode, nativePlace, resource, demand } = e;
    await perfectUserInfo({
      schoolCode,
      nativePlace,
      resource,
      demand,
    });
    await setUserInfo();
    closePopup();
  }

  function handleMaskClick() {
    emits('update:visible', false);
  }
</script>

<style lang="scss" scoped>
  .perfect-info__dialog {
    position: relative;
    z-index: 999;
    .dialog {
      &-container {
        border-radius: 32rpx 32rpx 0 0;
      }
      &-header {
        font-size: 32rpx;
        height: 96rpx;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        .icon-wrap {
          width: 100rpx;
          height: 100%;
          text-align: right;
          line-height: 96rpx;
        }
        .ali-icon {
          color: #999996;
          font-size: 32rpx;
        }
      }
    }
  }
</style>
